<template>
  <div>
    <div style="margin-bottom: 10px;overflow: hidden">
      <!--<div style="float: left;">
      </div>
      <div style="float: right;">
      </div>-->
    </div>
    <Table border
           size="small"
           ref="selection"
           :columns="columns"
           :data="dataList"
           :loading="dataListLoading"
           @on-row-click="handleSelectOne"
           stripe></Table>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <Page
          :total="totalPage"
          size="small"
          :page-size="pageSize"
          :page-size-opts="[10,20,30,50,100]"
          :current="pageIndex"
          @on-change="handleCurrentChange"
          @on-page-size-change="handleSizeChange"
          show-elevator
          show-sizer
          show-total></Page>
      </div>
    </div>
    <add-or-update v-if="addOrUpdateVisiable"
                   ref="addOrUpdate"
                   :parentId="parentId"
                   @refreshDataList="getDataList"
    >
    </add-or-update>
  </div>
</template>

<script>
import columnTree from './colum-tree'
// import util from '@/libs/util';
export default {
  name: 'columnTree',
  props: {
    parentId: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      /* 查询项 */
      dataForm: {
        userId: 0,
        name: ''
      },
      // 数据列表
      dataList: [],
      // 当前页
      pageIndex: 1,
      // 每页数据条数
      pageSize: 10,
      // 总页数
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisiable: false,
      columns: [
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h(columnTree, {
              props: {
                parentId: params.row.id
              },
              on: {
                getVal: (val) => {
                  /* 接受到子组件回调参数 */
                  this.$emit('getColumId', val);
                }
              }
            });
          }
        },
        {
          type: 'index',
          title: '序号',
          width: 65,
          align: 'center'
        },
        {
          title: '栏目名',
          key: 'name'
        }
      ]
    }
  },
  components: {
    columnTree
  },
  created () {
    this.getDataList();
  },
  activated () {
    /* todo:不执行，原理暂不清楚
          */
    this.getDataList();
  },
  methods: {
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl('/column/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize,
          'name': this.dataForm.name,
          'parentId': this.parentId
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list;
          this.totalPage = data.page.totalCount;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      })
    },
    // 每页显示数据条数变化
    handleSizeChange (val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页码变化
    handleCurrentChange (val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 单选（点击行选中）
    handleSelectOne (val, index) {
      this.$emit('getColumId', val);
      this.$emit('getVal', val);
      this.$refs.selection.toggleSelect(index);
    }
    // 导出
  }
}
</script>

<style scoped>

</style>
